<template>
    <!-- 重置密码 -->
    <el-dialog
            :visible.sync="visible"
            width="700px"
            :before-close="handleClose"
            class="box-card">
        <h1 align="center" style="padding-bottom: 40px;font-size: 20px">重置 {{ targetResetUserName }} 的密码 <i
                class="el-icon-lock"></i></h1>
        <el-form
                label-width="100px"
                label-position="right"
                style="width: 90%"
                status-icon>
            <el-form-item label="新密码" prop="pass">
                <el-input type="password" v-model.trim="passwordValue" maxlength="20" clearable show-word-limit
                          autocomplete="off"/>
            </el-form-item>
            <el-form-item align="right">
                <el-button @click="handleClose" size="mini">取消</el-button>
                <el-button type="primary" @click="resetPass" size="mini">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- /重置密码 -->
</template>

<script>
    export default {
        props: {
            visible: { // 接受父组件传值，为了打开窗口
                type: Boolean,
                default: false
            },
            targetResetUserName: { // 接受父组件传值，为了显示用户名
                type: String,
                default: ''
            }
        },
        data() {
            return {
                // 定义新密码属性，本组件使用，并传值给父组件
                passwordValue: ''
            }
        },
        methods: {
            // 关闭窗口
            // 清空输入框，触发父组件关闭窗口方法，来关闭窗口
            handleClose() {
                this.passwordValue = '' // 清空密码输入框
                this.$emit('remoteClose'); // 触发父组件事件，关闭窗口
            },
            // 重置密码
            resetPass() {
                // 触发父组件事件，执行重置密码，同时把用户输入的密码传值给父组件
                this.$emit('resetPassword', this.passwordValue);
            }


        }
    }
</script>
<style scoped>
    .title {
        font-size: 22px;
        text-align: center;
        margin-bottom: 20px;
    }
</style>